<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="reset.css"/>
		<link rel="stylesheet" type="text/css" href="move_index.css"/>
		<link rel="stylesheet" type="text/css" href="dist/css/swiper.min.css"/>
		<title>首页</title>
	</head>
	<body>
	<!-- 头部  -->
		<header class="clearfix">
			<div class="logo fl">
				<a href="move_index.html"><img src="image/logo.png"/></a>
			</div>
			<div class="selectBar fr">
				<select name="city">
					<option value="canton">广州市</option>
					<option value="FS">佛山市</option>
					<option value="SZ">深圳市</option>
				</select>
			</div>
			<div class="searchBar ">
				<input type="search" placeholder="请输入商品名称"/>
				<input type="image" src="image/fangdajing.png" />
			</div>
		</header>
		<!-- 头部  -->
		 <!-- Swiper -->

		<!-- 主体 -->
		<section>
		 <div>
		    <div class="swiper-container">
			    <div class="swiper-wrapper">
			      <div class="swiper-slide"><img src="image/content.jpg"/></div>
			      <div class="swiper-slide"><img src="image/content.jpg"/></div>
			      <div class="swiper-slide"><img src="image/content.jpg"/></div>
			      <div class="swiper-slide"><img src="image/content.jpg"/></div>
			    </div>
			    <!-- Add Pagination -->
			    <div class="swiper-pagination"></div>
		    </div>
		 	<div class="context2 clearfix">
		 		<div class="fl"><img src="image/icon1.png"/></div>
		 		<div class="fl"><p>优惠团购</p></div>
		 		<div class="fr"><a href="move_detail.html">更多<img src="image/icon2.png" align="center"/></a></div>
		 	</div>
		 	<div class="context3 clearfix">
		 		<div class="clearfix">
		 			<div class="fl"><img src="image/goods.jpg"/></div>
		 		     <div class="fl"><img src="image/goods2.jpg"/></div>
		 		     <div class="fl"><img src="image/goods3.jpg"/></div>
		 		     <div class="fl"><img src="image/goods4.jpg"/></div>
		 		</div>
		 	</div>
		 	<div class="context4 clearfix">
		 		<div class="fl"><img src="image/icon3.png"/></div>
		 		<div class="fl"><p>猜你喜欢</p></div>
		 		<div class="fr"><a href="move_detail.html">更多<img src="image/icon2.png" align="center"/></a></div>
		 	</div>
		 	<div class="context5">
		 		<div class="clearfix">
		 			<div class="fl"><img src="image/food.jpg"/></div>
		 			<div class="fl">
		 			    <p>万岁寿司（正佳店）</p>
		 			    <p>[100店通用]双人套餐</p>
		 			    <p style="padding-bottom: 0;">￥88.00</p>
		 			</div>
		 			<div class="fr">
		 				<p><100m</p>
		 				<p>已售1000</p>
		 			</div>
		 		</div>
		 		<div class="clearfix">
		 			<div class="fl"><img src="image/food2.jpg"/></div>
		 			<div class="fl">
		 			  <p>周黑鸭（正佳店）</p>
		 			  <p>[100店通用]双人套餐</p>
		 			  <p>￥88.00</p>
		 			</div>
		 			<div class="fr"">
		 				<p><100m</p>
		 				<p>已售1000</p>
		 			</div>
		 		</div>
		 		
		 	</div>
		 </div>
		</section>
		<!--底部-->
		<footer class="clearfix">
			
			
			<div class="fl">
				<a href="move_index.html">
				<div><img src="image/home.png"/></div>
				<p>首页</p>
				</a>
			</div>
			<div class="fl">
				<a href="move_class.html">
				<div><img src="image/class.png"/></div>
				<p>分类</p>
				</a>
			</div>
			<div class="fl">
				<a href="move_find.html">
				<div><img src="image/discover.png"/></div>
				<p>发现</p>
				</a>
			</div>
			<div class="fr">
			    <a href="move_my.html">
				<div><img src="image/person.png"/></div>
				<p>我的</p>
				</a>
			</div>
		
		
		</footer>
		
		
		
		<!-- 脚本 -->
		<script>
    
        
    	document.body.style.height = window.innerHeight + "px"; //安卓的加这个 ，解决键盘的影响
    
	    /*动态改变根元素字体大小*/
	    function recalc() {
	    	// 获取客户端宽度
	        var clientWidth = document.documentElement.clientWidth;
	        if(!clientWidth) return;
	        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
	        document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
	        
	    }
	
	    function initRecalc() {
	        recalc();
	        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
	        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
	        if(!document.addEventListener) return;
	        window.addEventListener(resizeEvt, recalc, false);
	        document.addEventListener('DOMContentLoaded', recalc, false);
	    }
	    initRecalc();           
        </script>
      	<!--引入脚本-->
		<script src="dist/js/swiper.min.js"></script>    	
	    <!--js代码 启动swiper对象-->
		  <script>
		    var swiper = new Swiper('.swiper-container', {
		      pagination: {
		        el: '.swiper-pagination',
		      },
		      loop:true,
		      autoplay:true,
		    });
		  </script>
	</body>
</html>
